<template>
  <div style="background-color: beige;">
    <div style="margin: 10px 0">
      <el-carousel height="450px" :interval="10000">
        <el-carousel-item v-for="item in imgs" :key="item">
          <img :src="item" alt="" style="width: 100%;height: 100%">
        </el-carousel-item>
      </el-carousel>
    </div>

    <div style="margin: 10px 0">
<!--      <el-row :gutter="10">-->
<!--        <el-col :span="6" v-for="item in files" :key="item.id" style="margin-bottom: 10px">-->
<!--          <div style="border: 1px solid #ccc; padding-bottom: 10px">-->
<!--            <img :src="item.url" alt="" style="width: 100%">-->
<!--            <div style="color: #666; padding: 10px">{{ item.name }}</div>-->
<!--            <div style="padding: 10px"><el-button type="primary">购买</el-button></div>-->
<!--          </div>-->
<!--        </el-col>-->
<!--      </el-row>-->
      <div class="demo-image__preview">
        <el-card class="box-card">
          <div>
            <el-image
                style="width: 200px; height: 200px;padding:50px;flex: 1;"
                :src="url"
                :preview-src-list="srcList"
            >
            </el-image>
            <div class="text item" style="position: absolute; width:400px;">
              <div style="height: 50px; color: green;">
                <span>推荐产品：</span>
              </div>
              <el-collapse v-model="activeNames" @change="handleChange">
                <el-collapse-item title="简介" name="1">
                  <div>
                    PC/ABS 基础创新塑料(新加坡) CX2142ME耐化学PC/ABS医疗/护理用品
                  </div>
                  <div>
                    聚碳酸酯耐弱酸，耐弱碱，耐中性油。
                    聚碳酸酯不耐紫外光，不耐强碱。
                  </div>
                </el-collapse-item>
                <el-collapse-item title="特性" name="2">
                  <div>
                    PC是几乎无色的玻璃态的无定形聚合物，有极好的光学性。PC高分子量树脂有很高的耐性，悬臂梁缺口冲击强度为600~900J/m，未填充商标的热变形温度大约为130°C ，玻璃纤维增强后可使这个数值添加10°C。
                  </div>
                </el-collapse-item>
                <el-collapse-item title="产地" name="3">
                  <div>材料：PC</div>
                    <div>产地：沙伯基础</div>
                    <div>型号：CX2142ME</div>
                </el-collapse-item>
              </el-collapse>
            </div>
          </div>
        </el-card>
        <el-card class="box-card">
          <el-image
              style="width: 200px; height: 200px;padding:50px;"
              :src="url"
              :preview-src-list="srcList"
          >
          </el-image>
          <div class="text item" style="position: absolute; width:400px;">
            <el-collapse v-model="activeNames" @change="handleChange">
              <div style="height: 50px; color: green;">
                <span>推荐产品：</span>
              </div>
              <el-collapse-item title="简介" name="1">
                <div>
                  PC/ABS 基础创新塑料(新加坡) CX2142ME耐化学PC/ABS医疗/护理用品
                </div>
                <div>
                  聚碳酸酯耐弱酸，耐弱碱，耐中性油。
                  聚碳酸酯不耐紫外光，不耐强碱。
                </div>
              </el-collapse-item>
              <el-collapse-item title="特性" name="2">
                <div>
                  PC是几乎无色的玻璃态的无定形聚合物，有极好的光学性。PC高分子量树脂有很高的耐性，悬臂梁缺口冲击强度为600~900J/m，未填充商标的热变形温度大约为130°C ，玻璃纤维增强后可使这个数值添加10°C。
                </div>
              </el-collapse-item>
              <el-collapse-item title="产地" name="3">
                <div>材料：PC</div>
                <div>产地：沙伯基础</div>
                <div>型号：CX2142ME</div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-card>
      </div>
      <div style="background-color: white;margin-top: 5px;margin-right: 10px;">
        <el-row style="padding-left: 30px;padding-top: 10px;flex: auto;">
            <el-card :body-style="{ padding: '10px' }" style="margin-right: 30px;">
              <img
                  src="https://img-cdn.ibuychem.com/wiseshop/9/30/f547f6baff2e499e98e6a1e3407b7650@400x0.jpg"
                  class="image"
              />
              <div style="padding: 14px;">
                <span>生物基聚氯乙烯PVC复合材料</span>
                <div class="bottom">
                  <time class="time">{{ currentDate }}</time>
                  <el-button type="text" class="button"><a href="https://mall.ibuychem.com/offer/74413.html?search_access=1">详情</a></el-button>
                </div>
              </div>
            </el-card>
          <el-card :body-style="{ padding: '10px' }">
            <img
                src="https://img-cdn.ibuychem.com/wiseshop/5/20/6afb06be3a9d45c78b19fb917e9b2ab2@400x0.jpg"
                class="image"
            />
            <div style="padding: 14px;">
              <span>pvc增强级塑料颗粒 </span>
              <div class="bottom">
                <time class="time">{{ currentDate }}</time>
                <el-button type="text" class="button"><a href="https://mall.ibuychem.com/offer/73683.html?search_access=1">详情</a></el-button>
              </div>
            </div>
          </el-card>
        </el-row>
      </div>
    </div>


  </div>
</template>

<script>
export default {
  name: "frontHome",
  data() {
    return {
      imgs: [
        'https://img2.baidu.com/it/u=2135983542,3294174369&fm=253&fmt=auto&app=138&f=JPEG?w=641&h=410',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fm.xincailiao.com%2Fupload%2F201804%2F29%2F201804291643480139.jpg&refer=http%3A%2F%2Fm.xincailiao.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654223465&t=c41b060d6168f693ac44ec0f8d6dfc5a',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.defu123.com%2Fueditor%2F201803%2F26%2F1522032318159088738.jpg&refer=http%3A%2F%2Fimg.defu123.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654223554&t=83af1b905e25088d23c80d9f9b2c6866',
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.qjy168.com%2Fprovide%2F2016%2F02%2F18%2F6131593_20160218113839.jpg&refer=http%3A%2F%2Fimg1.qjy168.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1654223935&t=b2a8905548bfd0c53b763a086508ee68',
        'https://img0.baidu.com/it/u=3736027561,78225304&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500',
      ],
      files: [],
      url: 'https://img003.hc360.cn/k1/M06/25/78/8v784e0706575e1eAe7748F618284D3D8B.jpg',
      srcList: [
        'https://img005.hc360.cn/k1/M0C/25/78/Gi2edfe6603f47f3eBdBf8Bd2d83Cd36C49.jpg',
        'https://img006.hc360.cn/k1/M07/3B/2B/c50701e82d1554Ad3Ae77e40532B0230A8.jpg',
      ],
    }
  },
  // created() {
  //   this.request.get("/echarts/file/front/all").then(res => {
  //     console.log(res.data)
  //     this.files = res.data.filter(v => v.type === 'png' || v.type === 'jpg' || v.type === 'webp')
  //   })
  // },
  methods: {

  }
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.text {
  font-size: 14px;
}

.item {
}

.box-card {
  width: 99%;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button {
  padding: 0;
  min-height: auto;
}

.image {
  width: 100%;
  display: block;
}
</style>